<template>
<nav class="navbar navbar-expand-lg bg-body-tertiary nb">
  <div class="container">
    <span class="navbar-brand">SQL学习系统</span>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <router-link class="nav-link" :to="{name:'accountManage'}">用户管理</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{name:'defaultDBManage'}">默认表管理</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{name:'defaultSetManage'}">默认题集管理</router-link>
        </li>
      </ul>
      <div>
          <span class="navbar-brand" style="margin-right: 60px; font-weight: bold; font-size: 20px; color:yellowgreen">{{ now }}</span>
      </div>
      <span class="navbar-brand wel">欢迎登录，管理员</span>
      <router-link class="navbar-text" :to="{name: 'login'}" @click="logout"> 
        退出登录
      </router-link>
    </div>
  </div>
</nav>
</template>

<script>

import {useStore} from 'vuex';
import {ref} from 'vue';
import  formateDate from '@/utils/GetCurrentTime';

export default{
    name : 'FrameWork',
    setup(){
      const store = useStore();
      let now = ref('');
      const getTime = (now) => {
        setInterval( ()=>{
            now.value = formateDate(new Date());
        }, 1000);
      };

      const logout = () =>{
        store.dispatch('logout');
      };

      getTime(now);

      return {
        logout,
        getTime,
        now,
      }
    }

}
</script>

<style scoped>
   a{
      text-decoration: none;
   }
   .nb{
      background-color: #D1E7DD;
   }
   .navbar-brand{
        font-size: 22px;
   }
   .wel{
    margin-right:30px;
   }
</style>